<template>
  <nav class="navbar" :style="{ backgroundImage: 'url(' + headerBg + ')', height: height + 'px' }">
    <div class="container">
      <div class="header-functions flex flex-justify-content-between">
        <div class="logo-container">
          <img :src="require('@/assets/images/logo.png')" @click="handleHome" alt="" />
        </div>
        <div class="flex flex-align-items-center">
          <!--todo 套餐打开-->
          <!--        <el-link :underline="false" @click="handleMeal"-->
          <!--          ><i class="el-icon-goods mr5"></i><span>{{ $t('component.head.1') }}</span></el-link-->
          <!--        >-->
<!--          <div class="lang"><span @click="handleLang('en')" :class="activeLang === 'en' ? 'active' : ''">English</span>&nbsp;&nbsp;/&nbsp;&nbsp;<span @click="handleLang('pt')" :class="activeLang === 'pt' ? 'active' : ''">Portuguese</span></div>-->
          <!-- <el-select size="medium" v-model="activeLang" style="margin-right: 10px;width: 130px;" @change="handleLang">
            <el-option label="Portuguese" value="pt"></el-option>
            <el-option label="English" value="en"></el-option>
          </el-select> -->
          <div class="dropdown" style="margin-right:10px">
            <el-dropdown @command="handleLang">
              <span class="el-dropdown-link username">{{ activeLangName }}<i class="el-icon-arrow-down el-icon--right"></i> </span>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item command="profile" v-login>{{ $t('component.head.3') }}</el-dropdown-item> -->
                <el-dropdown-item command="pt">Portuguese</el-dropdown-item>
                <el-dropdown-item command="en">English</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-button type="default" v-login v-if="!hasLogin">{{ $t('component.head.2') }}</el-button>
          <div class="dropdown flex flex-align-items-center ml20" v-if="hasLogin">
            <img class="user-head" v-if="user.avatar&&user.avatar.startsWith('http')" :src="user.avatar" alt="" />
            <img class="user-head" v-else :src="domain + user.avatar" alt="" />
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link username">{{ user.no || $t('component.head.2') }}<i class="el-icon-arrow-down el-icon--right"></i> </span>
              <el-dropdown-menu slot="dropdown">
                <!-- <el-dropdown-item command="profile" v-login>{{ $t('component.head.3') }}</el-dropdown-item> -->
                <el-dropdown-item command="tab1">{{ $t('account.1') }}</el-dropdown-item>
                <el-dropdown-item command="tab2">{{ $t('account.2') }}</el-dropdown-item>
                <el-dropdown-item command="tab3">{{ $t('account.4') }}</el-dropdown-item>
                <el-dropdown-item command="tab4">{{ $t('account.5') }}</el-dropdown-item>
                <el-dropdown-item command="out" style="border-top:1px solid #d6d6d6">{{ $t('component.head.12') }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown @command="msgCommand"  style="margin-left: 20px;margin-right: 20px" v-if="hasLogin">
                <i class="el-icon-chat-dot-square" style="color: #fff; font-size: 30px"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(item, index) in conversationsList" :key="index" :command="item" vitem-login>
                    <div style="display: flex; align-items: center; height: 50px">
                      <div style="padding-top: 16px; margin-right: 5px">
                        <img class="user-head" v-if="item.avatar&&item.avatar.startsWith('http')" :src="item.avatar" alt="" />
                        <img class="user-head" v-else :src="domain + item.avatar" alt="" />
                      </div>
                     <div style="display:flex;align-items: center"><div>{{ $t('component.head.14') }}：</div><div class="ellipsis">{{ item.latestContent }}</div></div>
                    </div>
                  </el-dropdown-item>
                  <!-- <el-pagination
                    v-if="params2.total > 10"
                    @current-change="handleCurrentChange"
                    :current-page.sync="params2.pageNo"
                    layout="prev, pager, next"
                    :total="params2.total">
                  </el-pagination> -->
                </el-dropdown-menu>
                
              </el-dropdown>
          </div>
          <el-button style="margin-left:25px" type="default" size="medium" @click="goAdd">{{ $t('component.addGoods.1') }}</el-button>
        </div>
      </div>
    </div>
  </nav>
</template>
<script>
import headerBg from '@/assets/images/header-bg.png';
import { isLogin } from '@/utils';
import Api from '@/api';
import { Domain } from '@/constants';
export default {
  name: 'CuHeader',
  props: {
    height: {
      type: Number,
      default: 165,
    },
  },
  data() {
    return {
      domain: Domain,
      user: {},
      headerBg: headerBg,
      count: 0,
      conversationsList: [],
      activeLangName:"Portuguese",
      params2:{
        pageNo:0,
        pageSize:5
      },
    };
  },
  computed: {
    hasLogin() {
      return isLogin();
    },
    activeLang() {
      return window.localStorage.getItem('LANGUAGE') || 'pt';
    },
  },
  created() {
    if(this.activeLang === 'pt'){
        this.activeLangName = 'Portuguese'
      }else{
        this.activeLangName = 'English'
      }
    if (isLogin()) {
      this.loadUserInfo();
    }
  },
  methods: {
    goAdd() {
      if (!isLogin()){
        this.$login.show();
      }else {
        this.$router.push("/save")
      }
    },
    // 获取会话列表
    getConversation() {
      Api.sendUsers(this.params2).then(res=>{
        this.conversationsList = res.records
        this.params2.total = res.total
      })
    },
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`);
    //   this.params2.pageNo = val
    //   this.getConversation()
    // },
    loadUserInfo() {
      Api.loadUser().then((res) => {
        this.user = res;
        this.getConversation();
      });
    },
    handleHome() {
      this.$router.replace('/');
    },
    handleMeal() {
      this.$router.push({
        path: '/meal',
      });
    },
    handleCommand(command) {
      if (command === 'out') {
        this.$confirm(window.$lang.t('component.head.5'), window.$lang.t('component.head.6'), {
          type: 'warning',
        })
          .then(() => {
            window.localStorage.removeItem('TOKEN');
            this.$message({
              type: 'success',
              message: window.$lang.t('component.head.7'),
              // onClose: () => {
              //   this.$router.replace('/');
              // },
            });
            this.$router.replace('/');
          })
          .catch(() => {});
      }
      // if (command === 'profile' && isLogin()) {
      //   this.$router.push({
      //     path: '/account',
      //   });
      // }
      if((command === 'tab1'||command === 'tab2'||command === 'tab3'||command === 'tab4') && isLogin()){
        this.$router.push({
          path: '/account',
          query:{tab:command}
        });
      }
    },
    msgCommand(val) {
      this.$router.push({ path: '/chatDetail', query: { detail: JSON.stringify(val),supplyId:val.supplyId,channelId:val.id } });
    },
    handleLang(lang) {
      window.localStorage.setItem('LANGUAGE', lang);
      window.location.reload();
    },
  },
};
</script>
<style lang="scss" scoped>
.navbar {
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;
  overflow: hidden;

  .header-functions {
    width: 100%;
    color: #fff;
    margin-top: 20px;
    .el-link.el-link--default {
      color: #fff;
    }
    .lang {
      color: #333;
      font-size: 14px;
      cursor: pointer;
      margin-right: 20px;
      span {
        &.active {
          color: #fff;
        }
        &:hover {
          opacity: 0.8;
        }
      }
    }
    .username {
      color: #fff;
      cursor: pointer;
    }

    .logo-container {
      img {
        width: 149px;
        height: 48px;
        margin-right: 10px;
      }
    }
  }
}
.user-head {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  margin-right: 5px;
  display: inline-block;
  background-color: #999999;
}
.el-dropdown-menu {
  padding: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  .el-dropdown-menu__item {
    color: #595959 !important;
    font-size: 14px;
    color: #595959 !important;
    text-align: center !important;
    margin-left: 0 !important;
    height: 50px;
    line-height: 50px;
    &:hover {
      background-color: #f7f7f7;
    }
    &:active {
      background-color: #f7f7f7;
    }
  }
}
.ellipsis{
  width: 150px;
  font-weight: 400;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-align: left;
}
</style>
